<template>
    <div class="container">
        <div class="opt-area-02">
            <div class="right-con">
                <div class="input-frame" style="width: 164px">
                    <Input type="text" @on-click="selectlist(1)" placeholder="请输入姓名" style="width: 164px" v-model="params.name"
                           icon="ios-search"/>
                </div>
                <div class="input-frame" style="width: 164px">
                    <Input type="text" @on-click="selectlist(1)" placeholder="请输入身份证号" style="width: 164px" v-model="params.card_no"
                           icon="ios-search"/>
                </div>
                <div class="input-frame" style="width: 164px">
                    <Input type="text" @on-click="selectlist(1)" placeholder="请输入联系方式" style="width: 164px" v-model="params.mobile"
                          icon="ios-search"/>
                </div>
                <!-- <div class="input-frame" style="width: 164px">
                    <Input type="text" @on-click="selectlist(1)" placeholder="请输入批次号" style="width: 164px" v-model="params.vaccines_no"
                          icon="ios-search"/>
                </div> -->
                <Button type="info" size="small" @click="selectlist(1)" style="margin-top: 5px">搜索</Button>
                <Button type="info" size="small" @click="modal2 = true" style="margin-top: 5px;margin-left: 10px">接种登记</Button>
            </div>
        </div>
        <Table :loading="countData.loading" border :columns="columns2" :data="fcDataList" size="small" ref="table">
            <template slot-scope="{ row }" slot="photo_url">
              <img :src="row.photo_url" alt="" style="width:20px;height:30px">
            </template>
            <template slot-scope="{ row }" slot="infoArea">
              <span>{{row.infoArea}}{{row.street}}{{row.community}}</span>
            </template>
            <template slot-scope="{ row }" slot="action" >
              <Button class="table-action-btn" type="success" size="small" @click="distribution(row, 'edit', params.states)">分配</Button>
            </template>
        </Table>
        <Row v-if="loadData == true">
          <Col class="demo-spin-col" span="8" offset="8">
            <Spin fix>
              <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
              <div>Loading</div>
            </Spin>
          </Col>
        </Row>
        <Row type="flex" justify="end" class="page_style">
          <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize"
                show-total @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
        </Row>
        <Drawer title="分配信息" v-model="modal1" width="700" :styles="styles">
            <Form :model="formData">
                <Row :gutter="32" class="mb20">
                  <Col span="24">
                    <h3>分配记录</h3>
                  </Col>
                </Row>
                <Row :gutter="32">
                  <Col span="24">
                      <Table border :columns="columns3" :data="log_list" size="small" style="margin-bottom:10px;">
                        <template slot-scope="{ row }" slot="vaccines_num">
                          <span v-if="row.vaccines_num == '1'">第一针</span>
                          <span v-if="row.vaccines_num == '2'">第二针</span>
                          <span v-if="row.vaccines_num == '3'">第三针</span>
                        </template>
                        <template slot-scope="{ row }" slot="ym_zj_num">
                          <span>{{row.ym_zj_num}}针剂</span>
                        </template>
                        <template slot-scope="{ row }" slot="inoculation_start_time">
                          <span>{{row.inoculation_start_time}}-{{row.inoculation_end_time}}</span>
                        </template>
                        <template slot-scope="{ row }" slot="action">
                          <Button class="table-action-btn" type="error" size="small" @click="cancelAppoint(row, 'edit')">取消分配</Button>
                        </template>
                      </Table>
                  </Col>
                </Row>
                <Divider>分配信息</Divider>
                <Card style="width:100%">
                  <Row :gutter="32">
                      <Col span="24">
                          <FormItem label="接种开始时间" label-position="top">
                              <DatePicker type="datetime" v-model="formData.inoculation_start_time" placeholder="请选择接种开始时间" style="width: 100%"></DatePicker>
                          </FormItem>
                      </Col>
                  </Row>
                  <Row :gutter="32">
                      <Col span="24">
                          <FormItem label="接种结束时间" label-position="right">
                              <DatePicker type="datetime" v-model="formData.inoculation_end_time" placeholder="请选择接种结束时间" style="width: 100%"></DatePicker>
                          </FormItem>
                      </Col>
                  </Row>
                  <Row :gutter="32">
                      <Col span="24">
                          <FormItem label="疫苗接种批次" label-position="right">
                            <Select v-model="ymdata" placeholder="请选择疫苗接种批次" filterable style="width: 100%" @on-change="changeYm(ymdata)">
                              <Option v-for="obj in inoculation_list" :value="JSON.stringify(obj)" :key="obj.id">{{obj.ym_name}}，{{obj.ym_zj_num}}针剂，可预约数量：{{obj.ym_num - obj.ym_use_num}}</Option>
                            </Select>
                          </FormItem>
                      </Col>
                  </Row>
                </Card>
            </Form>
            <div class="demo-drawer-footer">
                <Button style="margin-right: 8px" @click="modal1 = false">取消</Button>
                <Button type="primary" @click="submit">提交</Button>
            </div>
        </Drawer>
      <Drawer title="接种登记" v-model="modal2" width="700" :styles="styles">
        <Form :model="formData2">
          <Card style="width:100%">
            <Row :gutter="32">
              <Col span="24">
                <FormItem
                  label="接种地点" label-position="top">
                  <Select v-model="jzd_company_codeobj" placeholder="请选择接种点" filterable style="width: 100%">
                    <Option v-for="obj in bindList" :value="JSON.stringify(obj)" :key="obj.ym_company_code">{{obj.ym_company_name}}</Option>
                  </Select>
                </FormItem>
              </Col>
            </Row>
            <Row :gutter="32">
              <Col span="24">
                <FormItem
                  label="针剂类型" label-position="top">
                  <Select v-model="formData2.vaccines_needle" placeholder="请选择接种点" filterable style="width: 100%">
                    <Option value="1" >一针剂</Option>
                    <Option value="2" >二针剂</Option>
                    <Option value="3" >三针剂</Option>
                  </Select>
                </FormItem>
              </Col>
            </Row>
            <Row :gutter="32">
              <Col span="24">
                <FormItem
                  label="当前针次" label-position="top">
                  <Select v-model="formData2.vaccines_num" placeholder="请选择接种点" filterable style="width: 100%">
                    <Option value="1">第一针</Option>
                    <Option value="2" v-if="this.formData2.vaccines_needle != '1'">第二针</Option>
                    <Option value="3" v-if="this.formData2.vaccines_needle === '3'">第三针</Option>
                  </Select>
                </FormItem>
              </Col>
            </Row>
            <Row :gutter="32">
              <Col span="24">
                <FormItem
                  label="姓名" label-position="top">
                  <Input type="text" placeholder="请输入姓名" style="width: 100%" v-model="formData2.name"/>
                </FormItem>
              </Col>
            </Row>
            <Row :gutter="32">
              <Col span="24">
                <FormItem
                  label="身份证号" label-position="right">
                  <Input type="text" placeholder="请输入身份证号" style="width: 100%" v-model="formData2.cardNo"/>
                </FormItem>
              </Col>
            </Row>
            <Row :gutter="32">
              <Col span="24">
                <FormItem
                  label="手机号" label-position="right">
                  <Input type="text" placeholder="请输入手机号" style="width: 100%" v-model="formData2.mobile"/>
                </FormItem>
              </Col>
            </Row>
            <Row :gutter="32">
              <Col span="24">
                <FormItem
                  label="详细地址" label-position="right">
                  <Input type="text" placeholder="请输入详细地址" style="width: 100%" v-model="formData2.address"/>
                </FormItem>
              </Col>
            </Row>
          </Card>
        </Form>
        <div class="demo-drawer-footer">
          <Button style="margin-right: 8px" @click="modal2 = false">取消</Button>
          <Button type="primary" @click="addHelp">提交</Button>
        </div>
      </Drawer>
    </div>
</template>

<script>
import {
  doPostList,
  date0str,
  findCommunityYMList,
  findPeopleLogFromYmcList,
  saveCommunityAllocationInfoFromYmc,
  updateCommunityTimeFromymc,
  getVacInfoList, addHelpAppoint
} from '@/api/yi-qing-fang-kong'
// import saveparams from '@/view/yi-qing-fang-kong/saveparams.vue'
export default {
  name: 'list',
  data () {
    return {
      jzd_company_codeobj: '',
      formData2: {},
      modal2: false,
      jlDataList: [],
      ymdata: '',
      inoculation_list: '', // 接种点下拉列表
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      formData: {},
      modal1: false,
      loadData: true,
      loading: false,
      fcAllDataList: [],
      countData: { loading: false, fcnum: 0, ytbnum: 0, zcnum: 0 },
      params: { pageNo: 1, pageSize: 10, totalRecord: 0 },
      columns2: [
        { title: '序号', type: 'index', width: 60, align: 'center' },
        { title: '头像', slot: 'photo_url', align: 'center' },
        { title: '接种人姓名', key: 'name', align: 'center' },
        { title: '证件号码', key: 'card_no', align: 'center' },
        { title: '手机号', key: 'mobile', align: 'center' },
        { title: '现住址', slot: 'infoArea', width: 260, align: 'center' },
        { title: '接种点', key: 'company_name', align: 'center' },
        { title: '操作', slot: 'action', align: 'center', width: 100 }
      ],
      columns3: [ // 分配记录
        { title: '序号', type: 'index', width: 60, align: 'center' },
        { title: '姓名', key: 'name', width: 80, align: 'center' },
        { title: '当前针次', slot: 'vaccines_num', width: 100, align: 'center' },
        { title: '针剂', slot: 'ym_zj_num', width: 100, align: 'center' },
        { title: '接种时间段', slot: 'inoculation_start_time', align: 'center' },
        { title: '操作', slot: 'action', width: 90, align: 'center' }
      ],
      bindList: [],
      fcDataList: [],
      paramData: {},
      personel_id: '',
      jzd_company_code: '',
      vaccines_num: '', // 第几针
      card_no: '',
      log_list: []
    }
  },
  computed: {
    companyCode () {
      return this.$store.state.user.severUserInfo.company_code
    }
  },
  watch: {
  },
  methods: {
    getVacInfoList () {
      getVacInfoList({ 'xg_company_code': this.$store.state.user.severUserInfo.company_code }).then(res => {
        if (res.data.errcode === 0 && res.data.data.errcode === 0) {
          this.bindList = res.data.data.data.list
        } else {
          this.$Notice.error({
            title: '获取绑定接种点失败',
            desc: res.data.data.errmsg
          })
        }
      })
    },
    addHelp () {
      if (!this.jzd_company_codeobj) {
        this.$Notice.error({
          title: '添加失败',
          desc: '请填写接种地点'
        })
        return
      }
      if (!this.formData2.vaccines_needle) {
        this.$Notice.error({
          title: '添加失败',
          desc: '请填写针剂类型'
        })
        return
      }
      if (!this.formData2.vaccines_num) {
        this.$Notice.error({
          title: '添加失败',
          desc: '请填写当前针次'
        })
        return
      }
      if (!this.formData2.name) {
        this.$Notice.error({
          title: '添加失败',
          desc: '请填写姓名'
        })
        return
      }
      if (!this.formData2.cardNo) {
        this.$Notice.error({
          title: '添加失败',
          desc: '请填写身份证号'
        })
        return
      }
      if (!this.formData2.mobile) {
        this.$Notice.error({
          title: '添加失败',
          desc: '请填写手机号'
        })
        return
      }
      if (!this.formData2.address) {
        this.$Notice.error({
          title: '添加失败',
          desc: '请填写详细地址'
        })
        return
      }
      let params = this.formData2
      if (this.jzd_company_codeobj) {
        let obj = JSON.parse(this.jzd_company_codeobj)
        params.jzd_company_code = obj.ym_company_code
        params.place_name = obj.ym_company_name
      }
      addHelpAppoint(params).then(res => {
        if (res.data.errcode === 0 && res.data.data.errcode === 0) {
          this.$Notice.success({
            title: '成功',
            desc: '添加成功'
          })
          this.getList()
        } else {
          this.$Notice.error({
            title: '添加失败',
            desc: res.data.data.errmsg
          })
        }
      })
    },
    cancelAppoint (item) { // 取消分配
      if (confirm('确定取消分配吗？')) {
        updateCommunityTimeFromymc({ id: item.id }).then(res => {
          console.log(res.data, '32424234')
          if (res.data.errcode === 0 && res.data.data.errcode === 0) {
            this.$Notice.success({
              title: '成功',
              desc: '取消分配成功'
            })
          } else {
            this.$Notice.error({
              title: '失败',
              desc: res.data.data.errmsg
            })
          }
        })
      }
    },
    changeYm (item) {
      console.log(JSON.parse(item), 'item')
      this.paramData.ym_base_pici_id = JSON.parse(item).ym_pid
      this.paramData.id = JSON.parse(item).id
    },
    pageAction (page) {
      this.params.pageNo = page
      this.getList()
    },
    selectlist (inpageNo) {
      if (inpageNo) {
        this.params.pageNo = inpageNo
      } else {
        this.params.pageNo = 1
      }
      this.getList()
    },
    getList () {
      this.fcDataList = []
      this.loadData = true
      doPostList(this.params).then(res => {
        this.loadData = false
        let that = this
        if (res.data.errcode === 0) {
          that.fcDataList = res.data.data.data.results
          that.params.totalRecord = res.data.data.data.totalRecord
        } else {
          that.loadData = true
          that.$Notice.error({
            title: '查询列表信息失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.selectlist(this.params.pageNo)
    },
    distribution (item) {
      console.log(item, 'itemememmem')
      this.personel_id = item.id
      this.jzd_company_code = item.jzd_company_code
      this.card_no = item.card_no
      console.log(this.card_no, 'sfhengenzhag')
      this.getInoculationData(this.jzd_company_code)
      this.getJzList(item.card_no)
      this.formData = {}
      this.modal1 = true
    },
    submit () { // 分配
      if (this.formData.inoculation_start_time === '' || this.formData.inoculation_start_time === undefined) {
        const content = '<p>请选择疫苗接种开始时间</p>'
        this.$Modal.error({
          title: '错误',
          content: content
        })
        return
      }
      if (this.formData.inoculation_end_time === '' || this.formData.inoculation_end_time === undefined) {
        const content = '<p>请选择疫苗接种结束时间</p>'
        this.$Modal.error({
          title: '错误',
          content: content
        })
        return
      }
      if (this.paramData.ym_base_pici_id === '' || this.paramData.ym_base_pici_id === undefined) {
        const content = '<p>请选择疫苗接种批次</p>'
        this.$Modal.error({
          title: '错误',
          content: content
        })
        return
      }
      var param = {
        inoculation_start_time: date0str(this.formData.inoculation_start_time),
        inoculation_end_time: date0str(this.formData.inoculation_end_time),
        ym_base_pici_id: this.paramData.ym_base_pici_id,
        vaccines_num: this.vaccines_num,
        card_no: this.card_no,
        id: this.paramData.id
      }
      saveCommunityAllocationInfoFromYmc(param).then(res => {
        if (res.data.errcode === 0 && res.data.data.errcode === 0) {
          this.$Notice.success({
            title: '成功',
            desc: '疫苗分配成功'
          })
          this.modal1 = false
          this.getList()
        } else {
          this.$Notice.error({
            title: '失败',
            desc: res.data.data.errmsg
          })
        }
      })
    },
    getJzList (card_no) {
      findPeopleLogFromYmcList({ card_no: card_no }).then(res => {
        if (res.data.errcode === 0) {
          this.log_list = res.data.data.data
          this.vaccines_num = this.log_list.length + 1
          console.log(this.inoculation_list, '@#$@#$#@$@')
        } else {
          this.$Notice.error({
            title: '查询列表信息失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    getInoculationData (jzd_company_code) { // 获取接种点列表
      findCommunityYMList({ jzd_company_code: jzd_company_code, company_code: this.companyCode }).then(res => {
        if (res.data.errcode === 0) {
          this.inoculation_list = res.data.data.data
        } else {
          this.$Notice.error({
            title: '失败',
            desc: res.data.errmsg
          })
        }
      })
    }
  },
  mounted () {
    this.getVacInfoList()
    let that = this
    setTimeout(function () {
      that.getList()
    }, 500)
  }
}
</script>

<style scoped>
    .page_style {
        margin: 20px 5px;
    }

    .input-frame {
        width: 120px;
        margin-right: 10px;
    }

    .house-list > .group {
        background: white;
        padding: 10px;
        margin-top: 10px;
    }

    .house-list > .group > .item {
        border-bottom: 1px solid #f5f5f5;
        padding: 10px 0;
    }

    .house-list > .group > .item .top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
    }

    .house-list > .group > .item .title {
        font-size: 14px;
        color: #333333;
    }

    .house-list > .group > .item .address {
        font-size: 12px;
        color: gray;
        display: flex;
        align-items: center;
    }

    .house-list > .group > .item .detail {
        font-size: 12px;
        color: dodgerblue;
    }

    .opt-area-02 {
        display: flex;
        align-items: center;
        flex-direction: column;
        border: 1px solid #abdcff;
        background-color: #f0faff;
        padding: 8px 16px 8px 16px;
        border-radius: 4px;
        margin-bottom: 10px;
    }

    .opt-area-02 .right-con {
        width: 100%;
        margin-top: 5px;
        display: flex;
    }

    .opt-area-02 .left-con {
        font-size: 14px;
        width: 100%;
    }

    .opt-area-02 .left-con span {
        font-weight: bold;
    }

    .opt-area-02 .right-con input {
        width: 150px;
        margin-right: 10px;
    }

    .opt-area-02 .right-con .input-frame {
        width: 200px;
        margin-right: 10px;
    }

    .table-action-btn {
        margin-right: 3px;
    }

    .container >>> .ivu-btn-small {
        height: 24px;
        padding: 0 5px;
        font-size: 12px;
        border-radius: 3px;
    }

    .btn-action {
        margin-bottom: 10px;
    }

    .mp10 {
        margin-right: 10px;
    }
    .title-style {
      color: red;
    }
    .mb20 {
      margin-bottom: 20px;
    }
    .mt20 {
      margin-top: 20px;
    }
    .ivu-table-row {
      height: 57px;
    }
  .ivu-form-item-label {
    margin-top: 8px;
  }
    .demo-spin-icon-load{
      animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
      from { transform: rotate(0deg);}
      50%  { transform: rotate(180deg);}
      to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
      height: 100px;
      position: relative;
      /*border: 1px solid #eee;*/
    }
    .demo-drawer-footer{
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: right;
        background: #fff;
    }
</style>
